<!--  -->
<template>
  <div style="height:100%;overflow:auto;background:#fff">
    <div @click="refreshChart">刷新</div>
    
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="1" :data="data"></ts-g2-plot> </div>
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="2" :data="data"></ts-g2-plot> </div>
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="3" :data="data"></ts-g2-plot> </div>
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="4" :data="data"></ts-g2-plot> </div>
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="5" :data="data4"></ts-g2-plot> </div>
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="6" :data="data2"></ts-g2-plot> </div>
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="7" :data="data2" ></ts-g2-plot> </div>
    <div style="height: 50%; width: 50%;float:left;"><ts-g2-plot chartType="8" :data="data3"></ts-g2-plot> </div>
    <!-- <div id="container1" style="height: 50%; width: 50%;float:left;"></div>
     <div id="container2" style="height: 50%; width: 50%;float:left;"></div>
      <div id="container4" style="height: 50%; width: 50%;float:left;"></div>
      <div id="container5" style="height: 50%; width: 50%;float:left;"></div> -->
       <!-- <div id="container6" style="height: 50%; width: 50%;float:left;"></div> -->
  </div>
</template>

<script>
import { category } from '@antv/g2plot';
import { Line } from "@antv/g2plot";
import { Bar } from '@antv/g2plot';
import { Area } from '@antv/g2plot';
 import { Pie,Liquid } from '@antv/g2plot';
 import { DualAxes } from '@antv/g2plot';
export default {
  data() {
    return {
      data2:[{value:0.32,column:'门诊增长率'}],
       data4 : [
  { category: '2019-03', value: 35 ,column:''},
  { category: '2019-04', value: 90 ,column:''},
  { category: '2019-05', value: 30 ,column:''},
  { category: '2019-06', value: 45 ,column:''},
  { category: '2019-07', value: 47 ,column:''},
],
      data3:[
  { category: '2019-03', value: 800, column: 'a' },
  { category: '2019-04', value: 600, column: 'a' },
  { category: '2019-05', value: 400, column: 'a' },
  { category: '2019-06', value: 380, column: 'a' },
  { category: '2019-07', value: 220, column: 'a' },
  { category: '2019-03', value: 750, column: 'b' },
  { category: '2019-04', value: 650, column: 'b' },
  { category: '2019-05', value: 450, column: 'b' },
  { category: '2019-06', value: 400, column: 'b' },
  { category: '2019-07', value: 320, column: 'b' },
  { category: '2019-03', value: 900, column: 'c' },
  { category: '2019-04', value: 600, column: 'c' },
  { category: '2019-05', value: 450, column: 'c' },
  { category: '2019-06', value: 300, column: 'c' },
  { category: '2019-07', value: 200, column: 'c' },
      ],
      data: [
        { category: "1991", value: 35,column:'急诊' },
        { category: "1992", value: 49,column:'急诊'},
        { category: "1993", value: 35,column:'急诊' },
        { category: "1994", value: 53,column:'急诊' },
        { category: "1995", value: 49,column:'急诊' },
        { category: "1996", value: 63,column:'急诊' },
        { category: "1997", value: 73,column:'急诊' },
        { category: "1998", value: 95,column:'急诊' },
        { category: "1999", value: 63,column:'急诊' },
        { category: "1991", value: 32,column:'门诊' },
        { category: "1992", value: 44,column:'门诊'},
        { category: "1993", value: 35,column:'门诊' },
        { category: "1994", value: 52,column:'门诊' },
        { category: "1995", value: 49,column:'门诊' },
        { category: "1996", value: 69,column:'门诊' },
        { category: "1997", value: 73,column:'门诊' },
        { category: "1998", value: 99,column:'门诊' },
        { category: "1999", value: 193,column:'门诊' },
      ],
    };
  },

  components: {},

  computed: {},

  mounted() {
    // this.ininChart();
    // this.initcategory()
    // this.initBar()
    // this.initArea()
    // this.initPie()
    // this.initLiquid()
  },

  methods: {
    refreshChart(){
      this.data = [ { category: "1996", value: 63,column:'急诊' },
        { category: "1997", value: 73,column:'急诊' },
        { category: "1998", value: 95,column:'急诊' },
        { category: "1999", value: 63,column:'急诊' },
        { category: "1991", value: 32,column:'门诊' },
        { category: "1992", value: 44,column:'门诊'},
        { category: "1993", value: 35,column:'门诊' },
        { category: "1994", value: 52,column:'门诊' },
        { category: "1995", value: 49,column:'门诊' },
        { category: "1996", value: 69,column:'门诊' },
        { category: "1997", value: 73,column:'门诊' },
        { category: "1998", value: 99,column:'门诊' },
        { category: "1999", value: 193,column:'门诊' },]
//  this.ininChart();
//     this.initcategory()
//     this.initBar()
    },

    ininChart() {
      const line = new Line("container", {
        data: this.data,
        padding: "auto",
        xField: "category",
        yField: "value",
        seriesField: 'column',
        smooth: false,
        isStack:false, //分段是否累加
        xAxis: {
          // type: 'time',
        },
        yAxis: {
          label: {
            // 数值格式化为千分位
            formatter: (v) =>
              `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
          },
        },
        //显示数字
        label: {
        layout: [{ type: 'hide-overlap' }], // 隐藏重叠label
        style: {
          textAlign: 'left',
        },
        formatter: (item) => item.value,
      },
      //图例
        legend: {
        //  top  top-lefttop-right right right-top right-bottom left left-top left-bottom bottom bottom-left bottom-right
        position: 'top-right',
        itemName: {
          style: {
            fill: '#000',
          },
          formatter: (name) => name,
        },
      },
         // @TODO 后续会换一种动画方式
      animation: {
        animate:true,
    
      },
        // point
        point: {
          size: 5,
          style: {
            lineWidth: 1,
            fillOpacity: 1,
          },
          shape: (item) => {
            if (item.column === "Cement production") {
              return "diamond";
            }
            return "circle";
          },
        },
      });

      line.render();
    },
     initcategory() {
        const categoryPlot = new category('container2', {
        data:this.data,
        xField: 'category',
        yField: 'value',
        seriesField: 'column',
        isGroup:true,
        label: {
        // 可手动配置 label 数据标签位置
        position: 'top', // 'top', 'bottom', 'middle'
  
        // 可配置附加的布局方法
        layout: [
          // 柱形图数据标签位置自动调整
          { type: 'interval-adjust-position' },
          // 数据标签防遮挡
          { type: 'interval-hide-overlap' },
          // 数据标签文颜色自动调整
          { type: 'adjust-color' },
        ],
      },
      slider: {
          start: 0,
          end: 0.5,
      },
       mincategoryWidth: 10,  //最小宽度
       maxcategoryWidth: 50, //最大宽度
      });
      categoryPlot.render();
    },

    initBar(){
      const bar = new Bar('container1', {
  data:this.data,
  xField: 'value',
  yField: 'category',
  seriesField: 'column',
  isGroup:true,
  legend: {
    position: 'top-left',
  },
 
  marginRatio:0.1,
});

bar.render();

    },
    initArea() {  //面积图
         const area = new Area('container4', {
      data:this.data,
      xField: 'category',
      yField: 'value',
       seriesField: 'column',
      isGroup:true,
      xAxis: {
        range: [0, 1],
      },
    });
    area.render();
    },
    initPie(){
      const piePlot = new Pie('container5', {
  data:this.data,
  angleField: 'value',
  colorField: 'category',
   radius: 0.75,
  label: {
    type: 'inner',
    // type: 'spider',
    labelHeight: 28,
    content: '{name}\n{percentage}',
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
});

piePlot.render();
    },
    initLiquid(){
      const liquidPlot = new Liquid('container6', {
  percent: 0.3,
  outline: {
    border: 4,
    distance: 8,
  },
  wave: {
    length: 128,
  },
});
liquidPlot.render();
    },
    initDualAxes(){
      const dualAxes = new DualAxes('container6', {
  data: [uvBillData, transformData],
  xField: 'time',
  yField: ['value', 'count'],
  geometryOptions: [
    {
      geometry: 'category',
      isStack: true,
      seriesField: 'type',
      categoryWidthRatio: 0.4,
    },
    {
      geometry: 'line',
      seriesField: 'name',
      lineStyle: ({ name }) => {
        if (name === 'a') {
          return {
            lineDash: [1, 4],
            opacity: 1,
          };
        }
        return {
          opacity: 0.5,
        };
      },
    },
  ],
});

dualAxes.render();
    }
  },
};
</script>
<style lang='scss' scoped>
</style>
